<template>
  <div id="app">
    <h2 id="h2">基本使用</h2>
    <button id="btn1" @click="axiosGet">发送GET请求</button>
    <button id="btn2" @click="axiosPost">发送POST请求</button>
  </div>
</template>

<script>
import axios from "axios";
//创建实例对象
const duanzi =axios.create({
  baseURL:"http://localhost:3000",
  timeout:2000
});
//这里duanzi与axios对象的功能几斤是一样的
console.log(duanzi,axios);

export default {
  name: 'App',
  methods:{
    axiosGet:function(){
      //把定义的duanzi当做axios使用
      duanzi({
        method:'GET',
        url:"/posts"
      }).then(
        response=>{
          console.log("response",response.data);
        },
        error=>{
          console.log("error",error.message);
        }
      );
    },
  }  
}
</script>

<style>
  button{
    margin-left: 5px;
  }
  #btn1{
    background-color: skyblue;
  }
  #btn2{
    background-color: orange;
  }
</style>
